import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';

import TCScrollerView from '../components/TCScrollerView'
import WorkItem from '../components/WorkItem'
import request from '../utils/request';

import { storage } from '../utils/storage';

var Dimensions = require('Dimensions');

var { width, height } = Dimensions.get('window')

class Home extends Component {
  render() {

    var firstItems = [
      { imageName: '我的开支-work', name: '我的开支', styleType: '0', type: '1' },
      { imageName: '我的发票-work', name: '我的发票', styleType: '0', type: '2' },
      { imageName: '电子名片-work', name: '开票信息', styleType: '0', type: '3' },
      { imageName: '报销审批-work', name: '我的审批', styleType: '0', type: '4' },]
    var secondItems = [
      { imageName: '开支随手记-work', name: '开支随手记', type: '5' },
      { imageName: '日常申请-work', name: '日常申请', type: '6' },
      { imageName: '日常报销-work', name: '报销', type: '7' },
      { imageName: '现金预支-work', name: '现金预支', type: '8' },]

    var thirdItems = [
      { imageName: '出差申请-work', name: '出差申请', type: '9' },
      { imageName: '机票-work', name: '机票', type: '10' },
      { imageName: '酒店-work', name: '酒店', type: '11' },
      { imageName: '火车票-work', name: '火车票', type: '12' },]

    var thirdItemss = [
      { imageName: '出行用车-work', name: '出行用车', styleType: '1', type: '13' },
    ]
    var fourthItems = [
      { imageName: '签到-work', name: '签到', type: '14' },
      { imageName: '日程-work', name: '日程', type: '15' },
      { imageName: '公告-work', name: '公告', type: '16' },
      { imageName: '工作报告-work', name: '工作报告', type: '17' },]

    var fourthItemsss = [
      { imageName: '加班-work', name: '加班', styleType: '1', type: '18' },
      { imageName: '请假-work', name: '请假', styleType: '1', type: '19' },
    ]
    return (
      <View style={styles.container}>
        <View>
          <TCScrollerView />
        </View>
        <ScrollView>
          <View style={{ flexDirection: 'row' }}>{
            firstItems.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>
          <Text style={{ lineHeight: 40, backgroundColor: '#e8e8e8' }}>  报销应用</Text>
          <View style={{ flexDirection: 'row' }}>{
            secondItems.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>
          <Text style={{ lineHeight: 40, backgroundColor: '#e8e8e8' }}>  差旅应用</Text>
          <View style={{ flexDirection: 'row' }}>{
            thirdItems.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>
          <View style={{ flexDirection: 'row' }}>{
            thirdItemss.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>
          <Text style={{ lineHeight: 40, backgroundColor: '#e8e8e8' }}>  办公应用</Text>
          <View style={{ flexDirection: 'row' }}>{
            fourthItems.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>
          <View style={{ flexDirection: 'row' }}>{
            fourthItemsss.map(t => <WorkItem key={t.name} item={t} buttonPress={(t) => this.buttonPress(t)} />)
          }
          </View>

        </ScrollView>


      </View>
    );
  }
  buttonPress = (item) => {

    switch (item.type) {
      case '3': {
        storage.load({ key: 'accessUserData' }).then(result => {

          var url = 'https://uat.feikongbao.com/yodooweb/user/companyCard?orgCode=' + result.orgCode;

          this.props.navigation.navigate('IDCard', { url: url,title:'开票信息' });
        })
      }
        break;
      case '5': {
        this.props.navigation.navigate('ExpendPage',{title:'开支流水'});
      }
        break;
      default: alert(item.type);
    }


  }
}

export default Home;


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1
  },

})
